<template>
	<view class="content">
		<header-navbar class="headerNavbar"></header-navbar>
		<view class="safeArea" :style="{top:navHeaderHeight+'px'}">
			<!-- <view class="text-area">
				<text class="title">绝了</text>
			</view> -->
			<map class="mapBar" id="map1" :scale="scale" show-location :latitude="mapLatitude" :longitude="mapLongitude"
			 :markers="markers">
				<router-link to="/pages/menu/menu" navType="pushTab" class="backMenuBox">
					<button class="btn-hidden">
						<cover-image src="../../static/images/icon/map/backMenu.png" class="backMenu"></cover-image>
					</button>
				</router-link>
				<view class="shopAddress">

				</view>
				<button type="btn-hidden" hover-class="none" class="btnBackCenter" @click="handleLocation">
					<image src="../../static/images/icon/map/backCenter.png" class="backCenter"></image>
				</button>
			</map>
			<view class="searchBar" :class="[searchBarOpen ? 'searchBarShow' : 'searchBarHidden']">
				<view class="searchBarHeader" >
					<view class="searchBarButton" @click="searchBarTap">
						<view class="searchBarHeaderIcon"></view>
					</view>
					<view class="searchInput">搜索美食、地点或商圈</view>
					<view class="searchOrderBy">
						<view class="searchOrderByItem">全部美食</view>
						<view class="searchOrderByItem">全城</view>
						<view class="searchOrderByItem">智能排序</view>
					</view>
					<view class="shopsBox">
						<scroll-view class="ItemslideBox" scroll-y="true">
							<block v-for="(item,index) in shopsList" :key="index">
								<view class="shopsItem">
									<image src="../../static/images/icon/tabBar/icon-topBar.png" mode=""></image>
									<view class="shopsItemAttrBar">
										<text class="shopsName">{{item.title}}</text>
										<text class="shopsDistrict">地区：{{item.ad_info.district}}</text>
										<text class="shopsCategory">类型：{{item.category.slice(3,).replace(":","/")}}</text>
										<text class="shopsPrice">人均：￥20起</text>
									</view>
								</view>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderNavbar from '../../components/HeaderNavbar.vue';
	import {
		navHeaderHeight
	} from '../../assets/js/navHeaderHeight.js';
	import {
		qqmapsdk
	} from "../../assets/js/map.js";
	export default {
		name: 'map',
		data() {
			return {
				navHeaderHeight: null, //用于页面补充高度
				searchBarOpen: false, //默认不打开
				mapLatitude: null, //经度
				mapLongitude: null, //纬度
				scale: 14, //默认放大系数,数字越大越精细
				mapCtx: {}, //地图对象
				shopsList: [], //商家数据
				markers: [{
					id: 1,
					latitude: 23.147877,
					longitude: 113.332804,
					width: 20,
					height: 20,
					iconPath: "../../static/images/icon/map/shopAddress.png",
					label: {
						content: "YouTea",
						bgColor: "#FFF",
						color: "#FF8000",
						anchorX: 0,
						anchorY: 0,
						fontSize: 12,
						borderWidth: 1,
						borderColor: "#FF8000",
						borderRadius: 4,
						textAlign: "center",
						padding: 10,
					}
				},
					{
						id: 770863850825172009,
						latitude: 23.147901,
						longitude: 113.3324,
						width: 20,
						height: 20,
						iconPath: "../../static/images/icon/map/shopAddress.png",
						label: {
							content: "尚品轩餐厅",
						}
				},
				],

			}
		},
		components: {
			HeaderNavbar,
		},
		created() {
			let that = this;
			//把引入的全局高度补充给页面
			that.navHeaderHeight = navHeaderHeight
		},
		methods: {
			// 显示/隐藏搜索框
			searchBarTap() {
				let that = this
				that.searchBarOpen = !that.searchBarOpen
			},
			// //移到视图中心
			// moveMapViewPort() {
			// 	let that=this
			// 	//移动地图中心的位置为当前位置，实现定位
			// 	this.mapCtx.moveToLocation(()=>{
			// 		that.mapLatitude = 23.147713
			// 		that.mapLongitude = 113.332422
			// 	})
			// },
			// 执行函数
			getSettingMess() {
				// 获取已授权类别
				let that = this
				// let mapLatitude = this.mapLatitude
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							// 如果已授权,直接获取对应参数
							// uni.showToast({
							// 	title: '授权成功',
							// 	duration: 2000
							// })
							uni.getLocation({
								success(res) {
									// console.log(res)
									that.mapLatitude = res.latitude
									that.mapLongitude = res.longitude
									// console.log(that.mapLatitude)
									return
								}
							})
						} else if (!res.authSetting['scope.userLocation']) {
							// 说明此时要获取的位置功能尚未授权,
							// 则设置进入页面时主动弹出，直接授权
							uni.authorize({
								scope: 'scope.userLocation',
								success(res) {
									// 授权成功
									uni.showToast({
										title: '授权成功',
										duration: 2000
									})
									// console.log(res)
									// 成功后获取对应的位置参数
									uni.getLocation({
										success(res) {
											// console.log(res)
											return
										}
									})
								},
								//内层请求的失败回调
								fail() {
									// console.log("位置授权失败")
									uni.showToast({
										title: '授权失败',
										duration: 2000
									})
									return
								}
								//
							})
						}
					},
					//外层请求的失败回调
					fail() {
						uni.showToast({
							title: '授权失败',
							duration: 2000
						})
						// console.log("获取授权信息授权失败")
						return
					}

				})
			}, //getSettingMess()

			//结束(如果用户没拒绝)
			// 如果初始进入页面时点击了拒绝授权,如需要该权限,需要手动授权
			// 手动授权的触发方法
			handleLocation() {
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							// 再次判断所需权限是否已授权,如已授权则直接使用
							uni.getLocation({
								success(res) {
									// console.log(res)
									return
								}
							})
						} else if (!res.authSetting['scope.userLocation']) {
							// 如未授权则重新打开设置页面,进行授权
							uni.showModal({
								//弹出提示框
								title: '请开启定位',
								content: '要获取当前定位,需要在设置中打开定位功能',
								success(res) {
									if (res.confirm) {
										// 用户点击确定按钮
										uni.openSetting({
											// 确认后打开设置页面
											success(res) {
												if (res.authSetting['scope.userLocation']) {
													// console.log("手动授权成功")
													uni.showToast({
														title: '授权成功',
														duration: 2000
													})
													return
												} else {
													uni.showToast({
														title: '授权失败',
														duration: 2000
													})
													// console.log("手动授权失败")
													return
												}
											},
											fail() {
												uni.showToast({
													title: '打开设置失败',
													duration: 2000
												})
												// console.log("打开设置页面失败")
												return
											}
										})
									} else if (res.cancel) {
										// 用户点击取消按钮
										uni.showToast({
											title: '已取消',
											duration: 2000
										})
										// console.log('用户点击取消');
										return
									}
								},
								fail() {
									uni.showToast({
										title: '无法完成请求',
										duration: 2000
									})
									// console.log("确认取消弹出未弹出")
									return
								}
							});
						}
					}, //外层success
					fail() {
						uni.showToast({
							title: '获取授权失败',
							duration: 2000
						})
						// console.log("获取已授权信息失败")
						return
					}
				})
			} //handleLocation()

		}, //methods
		onReady(e) {
			this.mapCtx = uni.createMapContext('map1')
		},
		onLoad() {
			// 初始化页面,执行查看已授权信息
			// nearbySearch()
			// console.log(nearbySearch().shopsList);
			this.getSettingMess();
			// this.shopsList=nearby_search().shopList
			// console.log(this.shopsList)
		},
		onShow() {	
			let that=this
			let shopList=[]
			// nearbySearch()
			qqmapsdk.search({
			  keyword: '美食', //搜索关键词
			  location: '23.147877,113.332804', //设置周边搜索中心点
			  success: function(res) {
			    // console.log(111,res);
					for(let i=0;i<res.data.length;i++){
						// console.log(res.data[i]);
						let item = res.data[i]
						shopList.push(item)	
					}		
					// that.shopsList = shopList
					that.shopsList = JSON.parse(JSON.stringify(shopList.slice(0,6)))
					// shopList.map(item=>{
					// 	that.shopsList.push(item)
					// })
					console.log(that.shopsList);
			  },
			  fail: function(res) {
			    console.log('数据获取失败');
			  },
			  complete: function(res) {
			    console.log('数据获取完成');
			  }
			});
			
			
			uni.showToast({
				title: '如果没有显示内容,请打开GPS定位服务',
				icon: 'none',
				duration: 4000
			})
		},
	}
</script>

<style lang="scss">
	@import '@/assets/scss/mixin.scss';
	@import '@/assets/scss/config.scss';
	@import '@/assets/scss/base.scss';
	@import '@/assets/scss/modal.scss';
	@import '@/assets/scss/button.scss';

	.content {
		@include flex(center, flex-start);
		flex-direction: column;
		background-color: aliceblue;

		.headerNavbar {
			z-index: 10000;
		}

		.safeArea {
			width: 100%;
			// height: 2000rpx;
			// max-height: 1800rpx;
			position: relative;
			@include flex(center, flex-start);
			flex-wrap: wrap;

			.mapBar {
				width: 100vw;
				height: 100vh;
				position: relative;

				.backMenuBox {
					display: block;
					position: absolute;
					top: 30rpx;
					left: 30rpx;

					.backMenu {
						width: 80rpx;
						height: 80rpx;
					}

				}

				.btnBackCenter {
					display: block;
					position: absolute;
					bottom: 22vh;
					right: 20rpx;

					.backCenter {
						width: 70rpx;
						height: 70rpx;
					}
				}

			}

			//基础属性
			.searchBar {
				width: 100%;
				height: 80%;
				position: fixed;
				left: 0;
				@include border-radius(20rpx, 20rpx, 0, 0) background-color: #FFF;
				transition: all .5s;
				box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .1);
				// border: 1rpx solid #808080;
				@include flex(center, flex-start);
				flex-wrap: wrap;
				//内容
				.searchBarHeader {
					width: 100%;
					height: 30rpx;
					@include flex(center, flex-start);
					flex-wrap: wrap;

					.searchBarButton {
						height: 30rpx;
						margin-top: 10rpx;
						width: 100%;
						@include flex(center, center);

						.searchBarHeaderIcon {
							width: 60rpx;
							height: 12rpx;
							background-color: #C0C0C0;
							border: 1rpx solid #FFF;
							@include border-radius(10rpx, 10rpx, 10rpx, 10rpx)
						}
					}

					.searchInput {
						width: 90%;
						height: 50rpx;
						line-height: 50rpx;
						background-color: #E8E8E8;
						margin-top: 10rpx;
						padding: 0 0 0 20rpx;
						@include fontStyle($fontF, #555);
						@include border-radius(10rpx, 10rpx, 10rpx, 10rpx);
					}

					.searchOrderBy {
						width: 90%;
						height: 40rpx;
						line-height: 40rpx;
						margin-top: 20rpx;
						@include flex(flex-start, center);
						flex-wrap: nowrap;
						@include fontStyle($fontG, black);

						.searchOrderByItem {
							margin-right: 30rpx;

							&:after {
								font-size: $fontH;
								content: '▼';
								padding: 0 10rpx 0;
								color: #C0C0C0;
							}
						}
					}
				}

				//遍历项
				.shopsBox {
					width: 100%;
					padding: 10rpx;
					margin: 20rpx auto 0;
					height: 100vh;
					overflow: hidden;
					.ItemslideBox{
						height:70vh;
						.shopsItem {
							margin: 20rpx auto 20rpx;
							width: 100%;
							height: 200rpx;
						
							@include flex(flex-start, center);
							image {
								width: 200rpx;
								height: 200rpx;
								// padding: 10rpx;
							}
						
							.shopsItemAttrBar {
								width: 70%;
								height: 100%;
								padding: 20rpx;
								@include flex(center,center);
								flex-wrap:wrap;
								.shopsName,.shopsDistrict,.shopsCategory,.shopsPrice{
									display: block;
								}
								.shopsName{
									width: 100%;
									@include fontStyle($fontD,black);
									// background-color: $colorA;
								}
								.shopsDistrict{
									@include fontStyle($fontF,$colorD);
									width: 50%;
									padding-left: 30rpx;
								}
								.shopsCategory{
									@include fontStyle($fontF,$colorD);
									width: 50%;
								}
								.shopsPrice{
									@include fontStyle($fontF,$colorD);
									width: 100%;
									padding-left: 30rpx;
								}
							}
						}
					}
					
				}
			}

			//变化状态
			.searchBarShow {
				bottom: 0;
			}

			.searchBarHidden {
				bottom: -69%;
			}
		}
	}
</style>
